<template>
  <div class="discountPage">
    <div class="content-wrap">
      <div class="name">{{seller.name}}</div>
      <div class="scrore-wrap">
        <common-score :size="48" :score="seller.score"></common-score>
      </div>
      <div class="title">
        <div class="line"></div>
        <div class="text">优惠信息</div>
        <div class="line"></div>
      </div>
      <ul v-if="seller.supports && classMap.length > 0" class="supports">
        <li class="supports-item" v-for="(item, index) of seller.supports" :key="index">
          <span class="icon" :class="classMap[seller.supports[index].type]"></span>
          <span class="text">{{item.description}}</span>
        </li>
      </ul>
      <div class="title">
        <div class="line"></div>
        <div class="text">商家公告</div>
        <div class="line"></div>
      </div>
      <div class="bulletin-wrap">
        <p class="bulletin">{{seller.bulletin}}</p>
      </div>
    </div>
    <div class="close-warp">
      <span class="icon-close" @click="handleClose"></span>
    </div>
  </div>
</template>

<script>
import CommonScore from '@/common/score/Score.vue'
export default {
  name: 'HomeDiscount',
  props: {
    seller: Object,
    classMap: Array
  },
  components: {
    CommonScore
  },
  methods: {
    handleClose () {
      this.$emit('closeDiscount')
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .discountPage
    position: fixed
    left: 0
    top: 0
    bottom: 0
    right: 0
    background: rgba(1,17,27,.8)
    z-index:100
    color:#fff
    .content-wrap
      position: absolute;
      top: 0;
      left: 0;
      width: 100%
      bottom:192px
      overflow-y:scroll
      -webkit-overflow-scrolling: touch;
      .name
        line-height:32px
        font-size:32px
        font-weight:700
        text-align: center
        margin-top: 128px
      .scrore-wrap
        width:360px
        margin:32px auto 0px
      .title
        margin:56px 48px 72px
        display:flex
        align-items: center;
        text-align:center
        .line
          flex:1
          height:2px
          background:rgba(250,250,250,0.5)
        .text
          padding:0 24px
          font-size:28px
          font-weight: 700
      .supports
        margin:0 96px
        .supports-item
          display:flex
          align-items: center;
          margin-bottom:12px
          font-size:0
          &:last-child
            margin-bottom:0
          .icon
            display: inline-block
            width:32px
            height:32px
            margin-right:12px
            background-size:32px 32px
            &.decrease
              bg-image('decrease_2')
            &.discount
              bg-image('discount_2')
            &.guarantee
              bg-image('guarantee_2')
            &.invoice
              bg-image('invoice_2')
            &.special
              bg-image('special_2')
          .text
            font-size:24px
            flex:1
      .bulletin-wrap
        margin:0 96px
        .bulletin
          font-size:24px
          line-height:2em
    .close-warp
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      padding 64px 0
      font-size:64px
      line-height:64px
      text-align: center
</style>
